<template lang="html">
  <div class="container" v-loading="loading">
      <div class="search">
          <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号或客户姓名/设计师姓名/店铺名称/产品名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
              </el-form-item>
          </el-form>
      </div>

      <div class="tables">
        <el-table :data="tableData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column prop="date" label="产品" align="center" width="300">
                <template slot-scope="scope">
                  <div class="images">
                    <img v-for="(img,index) in scope.row.addresss" v-if="index<3" :src="img.picUrl" alt="">
                    <span v-if="scope.row.addresss.length>3">...</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="branchStoreName" label="店铺名称" align="center"></el-table-column>
              <el-table-column prop="date" label="收货信息" align="center" width="200">
                <template slot-scope="scope">
                  <div class="">
                    <p>姓名：{{scope.row.addressPerson}}</p>
                    <p>手机号：{{scope.row.addressPhone}}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="配送地址" align="center"></el-table-column>
              <el-table-column prop="orderCount" label="订单数量" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="fShip(scope.row)">发货</el-button>
                      <el-button type="success" size="mini" @click="fGo(scope.row)">全部</el-button>
                      <el-button type="danger" size="mini" @click="fSplit(scope.row)">拆分</el-button>
                  </template>
              </el-table-column>
        </el-table>
        <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
      </div>

      <el-dialog title="拆分包裹" append-to-body :visible.sync="dialogVisible" width="30%">
          <div class="dialog">
            <img src="../../assets/img/gantanhao.png" alt="">
            <span>包裹拆分后将回到上一步状态，确认要拆分吗？</span>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      searchText: '',
      dialogVisible: false,
      tableData: [],
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      currentRows: {}
    }
  },
  created(){
    this.selectSendLogPage();
  },
  methods:{
    selectSendLogPage(){
      this.loading = true;
      this.$http.selectSendLogPage({
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.loading=false;
        this.tableData = Object.assign([], res.data.rows);
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
      });
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    fShip(e){
      let ids = [];
      e.addresss.forEach(item=>{ids.push(item.orderSublistId);});
      this.$prompt('物流单号', '填写物流单号').then(({value})=>{
        this.loading = true;
        this.$http.orderSendLogSend({
          orderSublistIds: ids.join(','),
          sendExpressNumber: value,
        }).then(res=>{
          this.loading = false;
          if(res.data.code == 0){
            this.$message.success(res.data.message);
            this.selectSendLogPage();
          }else{
            this.$message.error(res.data.message);
          }
        });
      }).catch(()=>0)
    },
    fSplit(e){
      this.currentRows = e;
      this.dialogVisible = true;
    },
    fGo(e){
      let {href} = this.$router.resolve({path: '/receive/logistics/goods_all', query:{address: e.address}});
      window.open(href, '_blank');
    },
    confirm(){
      let ids = [];
      this.currentRows.addresss.forEach(item=>{ids.push(item.orderSublistId);});
      if(!ids.join(',')){
        this.$message.error('没有包裹！');
        return false;
      }
      this.$http.orderSendLogSplits({
        orderSublistIds: ids.join(',')
      }).then(res=>{
        this.dialogVisible = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.selectSendLogPage();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.selectSendLogPage();
    },
  }
}
</script>

<style lang="css" scoped>
.dialog{
  text-align: center;
}
.dialog span{
  vertical-align: middle;
}
.dialog img{
  vertical-align: middle;
}
.images{
  display: flex;
  justify-content: center;
}
.images img{
  width: 80px;
  margin-right: 5px
}
</style>
